<!DOCTYPE html>
<html>
	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<link href="css/index.css" rel="stylesheet" type="text/css"  />
		<link href="css/drop_menu_style.css" rel="stylesheet" type="text/css"/>
		<link href="css/style_searchbox.css" rel="stylesheet" type="text/css" />
		<link href="css/hot_slide_show.css" rel="stylesheet" type="text/css" />

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/search_bar_script.js"></script>
		<script type="text/javascript" src="js/jquery.color.js"></script>
		
		<script type="text/javascript" src="js/slide_show_script.js"></script>
		<script type="text/javascript" src="js/jquery.easing.js"></script>
		
		
		<script  type="text/javascript">
            $(document).ready(function() {
                // buttons for next and previous item
                var buttons = {
                    previous : $('#jslidernews1 .button-previous'),
                    next : $('#jslidernews1 .button-next')
                };
                $obj = $('#jslidernews1').lofJSidernews({
                    interval : 4000,
                    easing : 'easeInOutQuad',
                    duration : 1200,
                    auto : true,
                    maxItemDisplay : 3,
                    startItem : 1,
                    navPosition : 'horizontal',
                    navigatorHeight : null,
                    navigatorWidth : null,
                    mainWidth : 980,
                    buttons : buttons
                });
            });
		</script>

		<title> Xmart - Portal Shop Online</title>
	</head>
	<body>
		<div class="nav-primary-container">
			<div class="top-nav">
				<div class="stick-nav-container">
					<div id="logo_home">
						<a href="http://xmart.com.vn"><img src="images/logo.png" /></a>
					</div>

					<div id="task-bar-top">
						<div id="user">
							<div id="register">
								<a href="#">Đăng ký</a>
							</div>
							<div id="separator">
								|
							</div>
							<div id="login">
								<a href="#">Đăng nhập</a>
							</div>

						</div>

						<div id="task" >
							<div id="pubic-product"class="button">
								<a href="#">Đăng sản phẩm </a>
							</div>
							<div id="open-shop" class="button">
								<a href="#">Mở Shop </a>
							</div>
						</div>

					</div>

					<div id="newsbar">
						<div id="news-button">
							ĐIỂM TIN
						</div>
						<div id="news-text">
							Hiển thị thông tin mới
						</div>
					</div>

				</div>
			</div>

			<div class="sticky-nav">
				<div class="stick-nav-container clearfix">
					<div id="cssmenu" >
						<ul>
							<li>
								<a href='#'><span>TRANG CHỦ</span></a>
							</li>
							<li class="has-sub">
								<a href='#'><span>LOẠI SẢN PHẨM</span></a>
								<ul>

									<li>
										<a href='#'><span>Điện Thoại</span></a>
									</li>
									<li>
										<a href='#'><span>Hàng Điện Tử</span></a>
									</li>

									<li>
										<a href='#'><span>Máy Tính-Linh Kiện</span></a>
									</li>
									<li>
										<a href='#'><span>Mẹ và Bé</span></a>
									</li>
									<li>
										<a href='#'><span>Nội Thất - Gia Dụng</span></a>
									</li>
									<li>
										<a href='#'><span>Nước Hoa-Mỹ Phẩm</span></a>
									</li>
									<li>
										<a href='#'><span>Ô tô-Xe Máy</span></a>
									</li>
									<li>
										<a href='#'><span>Quà Tặng - Lưu Niệm</span></a>
									</li>
									<li>
										<a href='#'><span>Thiết bị nghe nhìn</span></a>
									</li>
									<li>
										<a href='#'><span>Thời trang Nam</span></a>
									</li>

									<li>
										<a href='#'><span>Thời trang Nữ</span></a>
									</li>
									<li>
										<a href='#'><span>Phụ kiện thời trang</span></a>
									</li>
									<li>
										<a href='#'><span>Tổng hợp</span></a>
									</li>

								</ul>
							</li>

							<li>
								<a href='#'><span>SHOP</span></a>
							</li>
							<li>
								<a href='#'><span>HỖ TRỢ</span></a>
							</li>
						</ul>

						<div id="container">

							<div id="main">
								<form id="searchForm">
									<fieldset>
										<div class="input">
											<input type="text" name="s" id="s" value="Tìm kiếm" />
										</div>
										<input type="submit" id="searchSubmit" value="" />
									</fieldset>
								</form>
							</div>

						</div>

					</div>
				</div>
			</div>
		</div>

		<div class="sale-container">
			<a class="devision">HOT NHẤT</a>
		</div>

		<div class="sale-container">

			<div style="width:960px; height:340px;" class="lof-slidecontent" id="jslidernews1">

				<div class="button-previous">
					Previous
				</div>
				<div class="button-next">
					Next
				</div>
				<!-- MAIN CONTENT -->
				<div style="width:960px; height:340px;" class="main-slider-content">
					<div class="sliders-wrapper" style="width: 960px;">
						<ul class="sliders-wrap-inner" style="left: -960px; width: 7840px;">
							<li style="width: 960px;">
								<img title="Newsflash 2" src="images/thumbl_980x340.png">
								<div class="slider-description">
									<div class="slider-meta">
										<a href="#Category-1" title="Newsflash 1" target="_parent">/ Newsflash 1 /</a><i> &mdash; Monday, February 15, 2010 12:42</i>
									</div>
									<h4>Content of Newsflash 1</h4>
									<p>
										The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,... <a href="#" class="readmore">Read more </a>
									</p>
								</div>
							</li>
							<li style="width: 960px;">
								<img title="Newsflash 1" src="images/thumbl_980x340_002.png">
								<div class="slider-description">
									<div class="slider-meta">
										<a href="#Category-2" title="Newsflash 2" target="_parent">/ Newsflash 2 /</a><i> &mdash; Monday, February 15, 2010 12:42</i>
									</div>
									<h4>Content of Newsflash 2</h4>
									<p>
										Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are... <a href="#" class="readmore">Read more </a>
									</p>
								</div>
							</li>
							<li style="width: 960px;">
								<img title="Newsflash 3" src="images/thumbl_980x340_003.png">
								<div class="slider-description">
									<div class="slider-meta">
										<a href="#Category-3" title="Newsflash 3" target="_parent">/ Newsflash 3 /</a><i> &mdash; Monday, February 15, 2010 12:42</i>
									</div>
									<h4>Content of Newsflash 3</h4>
									<p>
										With a library of thousands of free Extensions, you can add what you need as your site grows. Don't... <a href="#" class="readmore">Read more </a>
									</p>
								</div>
							</li>
							<li style="width: 960px;">
								<img title="Newsflash 5" src="images/thumbl_980x340_004.png">
								<div class="slider-description">
									<div class="slider-meta">
										<a href="#Category-4" title="Newsflash 4" target="_parent">/ Newsflash 4 /</a><i> &mdash; Monday, February 15, 2010 12:42</i>
									</div>
									<h4>Content of Newsflash 4</h4>
									<p>
										Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... <a href="#" class="readmore">Read more </a>
									</p>
								</div>
							</li>
							<li style="width: 960px;">
								<img title="Newsflash 5" src="images/thumbl_980x340_005.png">
								<div class="slider-description">
									<div class="slider-meta">
										<a href="#" title="Newsflash 5" target="_parent">/ Newsflash 5 /</a><i> &mdash; Monday, February 15, 2010 12:42</i>
									</div>
									<h4>Content of Newsflash 5</h4>
									<p>
										Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... <a href="#" class="readmore">Read more </a>
									</p>
								</div>
							</li>
							<li style="width: 960px;">

								<img title="Newsflash 5" src="images/thumbl_980x340_006.png">
								<div class="slider-description">
									<div class="slider-meta">
										<a href="#" title="Newsflash 6" target="_parent">/ Newsflash 6 /</a><i> &mdash; Monday, February 15, 2010 12:42</i>
									</div>
									<h4>Content of Newsflash 6</h4>
									<p>
										Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... <a href="#" class="readmore">Read more </a>
									</p>
								</div>
							</li>
							<li style="width: 960px;">
								<img title="Newsflash 5" src="images/thumbl_980x340_007.png">
								<div class="slider-description">
									<div class="slider-meta">
										<a href="#" title="Newsflash 7" target="_parent">/ Newsflash 7 /</a><i> &mdash; Monday, February 15, 2010 12:42</i>
									</div>
									<h4>Content of Newsflash 7</h4>
									<p>
										Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... <a href="#" class="readmore">Read more </a>
									</p>
								</div>
							</li>
							<li style="width: 960px;">
								<img title="Newsflash 8" src="images/thumbl_980x340_008.png">
								<div class="slider-description">

									<div class="slider-meta">
										<a href="#" title="Newsflash 8" target="_parent">/ Newsflash 8 /</a><i> &mdash; Monday, February 15, 2010 12:42</i>
									</div>
									<h4>Content of Newsflash 8</h4>
									<p>
										Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... <a href="#" class="readmore">Read more </a>
									</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<!-- END MAIN CONTENT -->
				<!-- NAVIGATOR -->
				<div class="navigator-content">
					<div class="button-control action-start hover-stop"></div>
					<div class="navigator-wrapper" style="width: 78px; height: 27px;">
						<ul class="navigator-wrap-inner" style="width: 208px; left: 0px;">
							<li style="height: 27px; width: 26px;">
								<span>1</span>
							</li>
							<li style="height: 27px; width: 26px;" class="active">
								<span>2</span>
							</li>
							<li style="height: 27px; width: 26px;">
								<span>3</span>
							</li>
							<li style="height: 27px; width: 26px;">
								<span>4</span>
							</li>
							<li style="height: 27px; width: 26px;">
								<span>5</span>
							</li>
							<li style="height: 27px; width: 26px;">
								<span>6</span>
							</li>
							<li style="height: 27px; width: 26px;">
								<span>7</span>
							</li>
							<li style="height: 27px; width: 26px;">
								<span>8</span>
							</li>
						</ul>
					</div>

				</div>
				<!----------------- END OF NAVIGATOR --------------------->
			</div>

		</div>

		<div class="sale-container">
			<a class="devision">LOẠI SẢN PHẨM</a>
		</div>

		<div class="secondary">
			<div class="sale-container">

				<section class="categories">

					<article class="sub-category">
						<header>
							<hgroup class="category-name">
								<h1 class="highlight"><a class="top-category-link"> Điện thoại </a></h1>
							</hgroup>
						</header>
						<a class="image-category-link"> <img class="medium" src="images/categories/mobile-category.jpg"> </a>
					</article>
					<article class="sub-category">
						<header>
							<hgroup class="category-name">
								<h1 class="highlight"><a class="top-category-link"> Hàng điện tử </a></h1>
							</hgroup>
						</header>
						<a class="image-category-link"> <img class="medium" src="images/categories/electronic-category.jpeg"> </a>
					</article>

					<article class="sub-category">
						<header>
							<hgroup class="category-name">
								<h1 class="highlight"><a class="top-category-link"> Máy tính - Linh kiện </a></h1>

							</hgroup>
						</header>
						<a class="image-category-link"> <img class="medium" src="images/categories/computer-category.jpg"> </a>
					</article>

					<article class="sub-category">
						<header>
							<hgroup class="category-name">
								<h1 class="highlight"><a class="top-category-link"> Mẹ và bé </a></h1>

							</hgroup>
						</header>
						<a class="image-category-link"> <img class="medium" src="images/categories/mom-and-kid-category.jpg"> </a>
					</article>

					<article class="sub-category">
						<header>
							<hgroup class="category-name">
								<h1 class="highlight"><a class="top-category-link"> Nội thất - Đồ gia dụng </a></h1>

							</hgroup>
						</header>
						<a class="image-category-link"> <img class="medium" src="images/categories/furniture-category.jpg"> </a>
					</article>

					<article class="sub-category">
						<header>
							<hgroup class="category-name">
								<h1 class="highlight"><a class="top-category-link"> Nước hoa - Mỹ phẩm</a></h1>

							</hgroup>
						</header>
						<a class="image-category-link"> <img class="medium" src="images/categories/perfume-category.jpg"> </a>
					</article>

					<article class="sub-category">
						<header>
							<hgroup class="category-name">
								<h1 class="highlight"><a class="top-category-link"> Ô tô - Xe máy </a></h1>
							</hgroup>
						</header>
						<a class="image-category-link"> <img class="medium" src="images/categories/car-motorbike-category.jpg"> </a>
					</article>

					<article class="sub-category">
						<header>
							<hgroup class="category-name">
								<h1 class="highlight"><a class="top-category-link"> Quà tặng - Lưu niệm </a></h1>

							</hgroup>
						</header>
						<a class="image-category-link"> <img class="medium" src="images/categories/gift-category.jpg"> </a>
					</article>

					<article class="sub-category">
						<header>
							<hgroup class="category-name">
								<h1 class="highlight"><a class="top-category-link"> Thiết bị nghe nhìn </a></h1>

							</hgroup>
						</header>
						<a class="image-category-link"> <img class="medium" src="images/categories/digital-category.jpg"> </a>
					</article>

					<article class="sub-category">
						<header>
							<hgroup class="category-name">
								<h1 class="highlight"><a class="top-category-link"> Thời trang Nam </a></h1>

							</hgroup>
						</header>
						<a class="image-category-link"> <img class="medium" src="images/categories/men-fashion-category.jpg"> </a>
					</article>

					<article class="sub-category">
						<header>
							<hgroup class="category-name">
								<h1 class="highlight"><a class="top-category-link"> Thời trang nữ </a></h1>

							</hgroup>
						</header>
						<a class="image-category-link"> <img class="medium" src="images/categories/women-fashion-category.jpg"> </a>
					</article>

					<article class="sub-category">
						<header>
							<hgroup class="category-name">
								<h1 class="highlight"><a class="top-category-link"> Phụ kiện thời trang </a></h1>

							</hgroup>
						</header>
						<a class="image-category-link"> <img class="medium" src="images/categories/accessories-fashion-category.jpg"> </a>
					</article>
					<article class="sub-category">
						<header>
							<hgroup class="category-name">
								<h1 class="highlight"><a class="top-category-link"> Tổng hợp </a></h1>

							</hgroup>
						</header>
						<a class="image-category-link"> <img class="medium" src="images/categories/summary-category.jpg"> </a>
					</article>

				</section>

			</div>
		</div>

		<div class="footer">
			<ul class="footer-nav clearfix">
				<li class="nav-item">
					<ul class="footer-links">
						<li>
							<a href="http://xmart.com.vn"><img src="images/logo.png" /></a>
						</li>
						<li>
							Copyright &copy; 2012 <a href="http://xmart.com.vn">xmart.com.vn</a>
						</li>
					</ul>
				</li>

				<li class="nav-item">
					<ul class="footer-links">
						<li class="primary">
							CÔNG TY
						</li>
						<li>
							<a href="#">Về chúng tôi</a>

						</li>
						<li>
							<a href="#">FAQ</a>

						</li>
					</ul>
				</li>

				<li class="nav-item">
					<ul class="footer-links">
						<li class="primary">
							DỊCH VỤ KHÁCH HÀNG
						</li>
						<li>
							<a href="#"> Liên hệ </a>

						</li>
						<li>
							<a href="#"> Hỗ trợ </a>

						</li>

					</ul>
				</li>

			</ul>
		</div>

	</body>
</html>